<template>
    <div>
        <el-table :data="list" highlight-current-row v-loading="listLoading"  @selection-change="selsChange" style="width: 100%;" max-height="650">
                <el-table-column type="selection" width="30"></el-table-column>
                
                <el-table-column type="index" width="45"></el-table-column>
                
                <el-table-column prop="resName" label="文件标题"   :show-overflow-tooltip="true" min-width="180"></el-table-column>           
                
                <el-table-column prop="useType" label="文件类型" :formatter="useType"></el-table-column>
                

                <el-table-column prop="resSize" label="文件大小(M)" min-width="110" sortable ></el-table-column>

                <el-table-column prop="resStatus" label="隐私" :formatter="resStatus"></el-table-column>

                <el-table-column prop="createtime" label="上传时间"  :show-overflow-tooltip="true">
                    <template slot-scope="scope">
                        <div>{{scope.row.createtime | formatDate}} </div>
                    </template>
                </el-table-column> 
                
                <el-table-column ref="table" :show-overflow-tooltip="true" prop="resUrl" label="预览">
                    <template slot-scope="scope">
                      <a :href="scope.row.resUrl" v-if="scope.row.resUrl != ''" style="color: #42b983" target="_blank" title="IE浏览器不支持在线预览，请点击下载本地查看或者更换其他浏览器">点击预览</a>
                    </template>
                </el-table-column>

                <el-table-column prop="checkStatus" label="审核状态"  :formatter="checkStatus" :show-overflow-tooltip="true">
                </el-table-column>

                <el-table-column prop="checkRank" label="发布状态"  :formatter="checkRank" :show-overflow-tooltip="true">
                </el-table-column>

                <!-- <el-table-column ref="table" :show-overflow-tooltip="true" prop="url" label="缩略图">
                    <template slot-scope="scope">
                      <a :href="scope.row.url" style="color: #42b983" target="_blank"><img :src="scope.row.url" alt="点击打开" class="el-avatar"></a>
                    </template>
                </el-table-column> -->

                <el-table-column label="操作" width="250">
                    <template slot-scope="scope">
                        <el-button size="mini" type="success" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                        <el-button type="danger" size="mini"  @click="handleDel(scope.$index, scope.row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--工具条-->
        <el-col :span="24" class="toolbar">
            <el-button type="danger" size="mini" @click="batchRemove"  :disabled="this.sels.length===0" class="remove">批量删除</el-button>

            <el-pagination background  @size-change="handleSizeChange"  @current-change="handleCurrentChange"  :current-page.sync="formDate.pageNo" :page-count="pageCount" :page-sizes="[10, 20, 30, 50,100]"  layout="total, sizes,prev, pager, next, jumper" :pager-count="pagerCount" :total="total" class="pagination"></el-pagination>
        </el-col>

        <eForm ref="form" :is-add="isAdd" :condition="condition" :rName="rName" />
    </div>
</template>

<script>
import checkPermission from '@/utils/permission' 
import { resourcesDel } from '@/api/request'
import { formatDate } from '@/utils/formatDate.js';
import { resourcesSchool } from '@/api/data'
import eForm from './form'
export default {
    components: { eForm },
    props:["list","pageCount","pagerCount","total"],
    data() {
        return {
            rName:'文件',
            isAdd:true,
            listLoading: false,
            sels: [],//列表选中列
            formDate:{
                pageNo: 1,  
                pageSize:10,                
            },
            condition:[{
                    id: 4,
                    name: '文档'
                },
                {
                    id: 5,
                    name: '图片'
                },
                {
                    id: 6,
                    name: '其他'
            }]
        }
    },
    filters: {
        formatDate(time) {
            let date = new Date(time);
            return formatDate(date, 'yyyy-MM-dd hh:mm');
        }, 
    },
    methods: {
        checkPermission,
        selsChange: function (sels) {
            this.sels = sels;
        },
        handleCurrentChange(val) {
            this.$parent.formDate.pageNo = val;
            this.$parent.init()
        },
        handleSizeChange(val) {
            this.$parent.formDate.pageSize = val
            this.$parent.init()
            // console.log(`page ${val}`);
        },        
        useType(row, column) {
            return  row.useType == 4 ? '文档' : row.useType == 5 ? '图片'  : row.useType == 6 ? '其他':'';
        },
        resStatus(row){
           return row.resStatus == 0 ? '公开' : row.resStatus == 1 ? '私有' :'其他';
        },
        checkStatus(row){
           return row.checkStatus == 0 ? '待审核' : row.checkStatus == 1 ? '审核中' :  row.checkStatus == 2 ? '已通过' :  row.checkStatus == 3 ? '不通过' :'其他';
        },
        checkRank(row){
           return row.checkRank == 0 ? '审核中' : row.checkRank == 1 ? '已发布' : row.checkRank == 2 ? '拒绝发布':'其他';
        },
        async handleBtn(id){
            resourcesSchool(id).then(res => {
                if (res.code == 2000) {
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    });
                    this.$parent.init(); 
                }                           
            })
        },
        async handleEdit(index, row) {
            let Resuts = Object.assign({}, row) 
            this.$refs.form.form = Resuts
            this.$refs.form.ready()
            this.$refs.form.begins()
            this.$refs.form.isEdit = true
            this.isAdd = false
            this.$refs.form.dialog = true
        },
        batchRemove(){
            let ids = this.sels.map(item => item.id);
            console.log(this.$parent.total)
            this.$confirm('确认删除选中的记录吗?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        this.listLoading = true;
                        resourcesDel(ids).then(res => {
                            this.listLoading = false;
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.$parent.init();                            
                        })

                    }).catch(() => {
            });
        },
        handleDel(index,ID){
            let ids = [];
            ids.unshift(ID)
            this.$confirm('确认删除该记录吗?', '提示', {
                        type: 'warning'
                    }).then(() => {
                        // console.log(ids)
                        this.listLoading = true;
                        resourcesDel(ids).then(res => {
                            this.listLoading = false;
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.$parent.init();
                        })

                    }).catch(() => {
            });
        },  
    }
}
</script>